<template>
  <div class="map-box">
    <div id="map"></div>
    <div>
      点击覆盖物，使之置顶
    </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const map = new WMap.Map('map', {
        center: [103.48538303047181, 39.99969219049072],
        zoom: 6,
        minZoom: 3,
        maxZoom: 18
      })

      // 覆盖物点击置顶
      let newArr = []
      for (let index = 0; index < 8; index++) {
        const m = new WMap.Marker({
          icon: 'https://webapi.amap.com/images/car.png',
          position: new WMap.LngLat(103.048243 + 0.0001 * (index + 1), 36.059426),
          angle: index * 30,
          label: `${index}`,
          map
        })
        newArr.push(m)
      }
      newArr.forEach(m => {
        m.on('click', e => {
          map.setTop(m)
        })
      })
    })
  })
</script>

<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
</style>
